import React, { useState } from 'react';
import { Button, Popover ,Toast} from 'antd-mobile';

const Test = () => {

  const [showMore, setShowMore] = useState(false);

  const handleCopyClick = () => {
    console.log("复制 clicked");
  };

  const handleNewOrderClick = () => {
    console.log("再来一单 clicked");
  };

  const handleEditClick = () => {
    console.log("编辑 clicked");
  };

  const handleDeleteClick = () => {
    console.log("删除 clicked");
  };

  const handleSaveClick = () => {
    console.log("保存 clicked");
  };

  const handleShowMoreClick = () => {
    setShowMore(!showMore);
    console.log();
  };

  const type = 4
  const buttons = [
    type===1&& { text: "复制", onClick: handleCopyClick, className:"a2" },
    type===4&& { text: "复制", onClick: handleCopyClick, className:"a22" },
    true&&{ text: "添加物流信息", onClick: handleNewOrderClick,  className:"a6"},
   true&& { text: "取消订单", onClick: handleEditClick,  className:"a4"},
   true&& { text: "更新数据信息", onClick: handleDeleteClick,  className:"a6" },
   false&& { text: "再来一单", onClick: handleSaveClick,  className:"a4"}
  ].filter(item => !!item);

  console.log(buttons)

  return (
    <div className='test'>
      {buttons.length <= 3 ?
      (buttons.map((button, index) => <Button className={button.className} color='primary' key={index} onClick={button.onClick}>{button.text}</Button>)) :
      (buttons.slice(0,2).map((button, index) => <Button className={button.className} color='primary' key={index} onClick={button.onClick}>{button.text}</Button>))
      }
      {buttons.length > 3 && (
        <Popover.Menu
            onVisibleChange={handleShowMoreClick}
            actions={buttons.slice(2,).map(action => ({
            ...action,
            }))}
            onAction={node => Toast.show(`选择了 ${node.text}`)}
            placement='bottom-start'
            trigger='click'
      >
        <Button>点我</Button>
      </Popover.Menu>
      )}
    </div>
  );
};

export default Test;